<template>
  <div class="first_level_page">
    <section class="tab_section">
      <div class="tab">全部</div>
      <div class="tab active">出库</div>
      <div class="tab">入库</div>
    </section>
    <div class="marginTopHeight"></div>
    <div v-for="order in orderList" class="inorder_demo">
      <div class="inorder_top clear">
        <div class="left">采购单号：{{ order.orderCode }}</div>
        <div class="right">{{ order.createTime }}</div>
      </div>
      <div class="inorder_main clear">
        <div class="inorder_num_price clear">
          <div class="left">采购数量：{{ order.allBuyNum }}</div>
          <div class="right">¥{{ order.allPrice }}元</div>
        </div>
        <div class="inorder_address clear">
          <img class="left" src="../../images/location1.png" />
          <div class="left">
            {{ order.address }}
          </div>
        </div>
      </div>
      <div class="inorder_bottom">
        <div
          v-if="order.orderStep == 2"
          class="btn"
          @click.stop="startPicking(order.orderCode, order.warehouseCode)"
        >
          开始配货
        </div>
        <!-- <div
          v-if="order.orderStep > 2"
          class="btn"
        >
          完成配货
        </div> -->
        <div v-if="order.orderStep == 2" class="inorder_state right">
          <img src="../../images/mark.png" />
          待配货
        </div>
        <div v-if="order.orderStep > 2" class="inorder_state right">已配货</div>
      </div>
    </div>
    <div class="heightBottom"></div>
    <foot-guide></foot-guide>

    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import footGuide from "src/components/footer/footGuide";
import { selectInorderList } from "src/service/api";

export default {
  data() {
    return {
      orderList: [],
    };
  },
  watch: {
    "$route.query.flush"(newVal) {
      if (newVal) {
        this.selectInorderList();
      }
    },
  },
  created() {
    this.selectInorderList();
    // console.log(JSON.parse(localStorage.getItem("supplierInfo")).userId);
  },
  mounted() {},
  components: {
    footGuide,
  },
  methods: {
    selectInorderList() {
      selectInorderList({
        userId: JSON.parse(localStorage.getItem("supplierInfo")).userId,
      }).then((response) => {
        this.orderList = response.data;
      });
    },
    goInorderDetail() {
      this.$router.push("/inorderDetail");
    },
    startPicking(orderCode, warehouseCode) {
      this.$router.push({
        path: "/schedule/startPicking",
        query: { orderCode: orderCode, warehouseCode: warehouseCode },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.tab_section {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  @include wh(100%, 0.88rem);
  line-height: 0.88rem;
  @include sc(0.3rem, #333);
  background: #fff;
  .tab {
    flex: 1;
    text-align: center;
    margin: 0 0.2rem;
  }
  .tab.active {
    color: $blue;
    border-bottom: 0.04rem solid $blue;
  }
}
.marginTopHeight {
  @include wh(100%, 0.88rem);
}
.left {
  width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inorder_demo {
  background: #fff;
  margin-top: 0.2rem;
  border-bottom: 0.01rem solid #e3e3e3;
  .inorder_top {
    @include wh(100%, 0.78rem);
    border-bottom: 0.01rem solid #e3e3e3;
    padding: 0 0.2rem;
    div {
      @include sc(0.28rem, #999);
      line-height: 0.78rem;
    }
  }
  .inorder_main {
    border-bottom: 0.01rem solid #e3e3e3;
    padding: 0 0.2rem;
    .inorder_num_price {
      div {
        @include sc(0.28rem, #333);
        margin: 0.34rem 0 0.26rem;
        height: 0.28rem;
        line-height: 0.28rem;
      }
    }
    .inorder_address {
      font-size: 0;
      @include wh(100%, 0.8rem);
      margin-bottom: 0.28rem;
      img {
        @include wh(0.3rem, 0.38rem);
        margin: 0.21rem 0;
      }
      div {
        @include wh(6.7rem, 0.8rem);
        @include sc(0.28rem, #333);
        margin-left: 0.1rem;
      }
    }
  }
  .inorder_bottom {
    @include wh(100%, 0.82rem);
    padding: 0 0.2rem;
    .btn {
      float: left;
      @include wh(1.6rem, 0.54rem);
      line-height: 0.54rem;
      @include sc(0.28rem, $blue);
      border: 0.01rem solid $blue;
      border-radius: 0.04rem;
      text-align: center;
      margin-top: 0.14rem;
    }
    .inorder_state {
      @include sc(0.28rem, #333);
      height: 0.82rem;
      line-height: 0.82rem;
      img {
        @include wh(0.34rem, 0.34rem);
        float: left;
        margin: 0.24rem 0.06rem;
      }
    }
  }
}
</style>
